<template>
  <div class="loading" v-if="showLoading">
    <a-spin :size="28" :tip="loadingMsg"></a-spin>
  </div>
  <a-modal v-model:visible="showImage" draggable simple :maskClosable="true" centered mask keyboard :width="500"
    :footer="false">
    <img :src="imgUrl" style="width: 100%" />
  </a-modal>

  <router-view></router-view>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, ref } from 'vue';
let showLoading = ref(false);
let showImage = ref(false);
let imgUrl = ref('');
const loadingMsg = ref("Loading...");

const instance = getCurrentInstance();
if (instance) {
  const mitt = instance.appContext.config.globalProperties.mittBus;
  onMounted(() => {
    //全局监听打开图片
    mitt.on('open-image', (img: any) => {
      imgUrl.value = '';
      showImage.value = true;
    });
    //全屏加载中
    mitt.on('show-loading', (msg?: any) => {
      if (msg) {
        loadingMsg.value = msg;
      }
      showLoading.value = true;
      setTimeout(() => {
        showLoading.value = false;
      }, 60000);
    });
    //关闭全局加载
    mitt.on('hide-loading', () => {
      showLoading.value = false;
    });
  });
}
</script>
<style scoped>
html,
body,
/* #app {
  padding: 0;
  margin: 0;
  display: flex;
  width: 100%;
  height: 100%;
} */

.loading {
  width: 100%;
  height: 100vh;
  background: rgba(255, 255, 255, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.content-header {
  padding: 0 0 20px 0;
  background: #ffffff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.rows {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.column {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.flex-center {
  justify-content: center;
  align-items: center;
}
</style>
